<template>
  <!-- 组件div -->
  <div class="stbox">
    <div class="userlist">
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入内容" v-model="searchval" clearable @clear="clear" class="input-with-select">
              <el-button @click="btn" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="430px">
              <el-form :model="toAdd">
                <el-form-item label="账号" :label-width="formLabelWidth">
                  <el-input prefix-icon="el-icon-user" v-model="toAdd.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input prefix-icon="el-icon-lock" v-model="toAdd.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                  <el-input prefix-icon="el-icon-message" v-model="toAdd.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                  <el-input prefix-icon="el-icon-mobile" v-model="toAdd.mobile"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="btnAdd">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
        <div class="box" style="margin:10px 0;">
          <template>
            <el-table :data="tableData" style="width: 100%" :border="true">
              <el-table-column type="index" width="48">
              </el-table-column>
              <el-table-column prop="username" label="用户">
              </el-table-column>
              <el-table-column prop="mobile" label="电话">
              </el-table-column>
              <el-table-column prop="email" label="邮箱">
              </el-table-column>
              <el-table-column prop="role_name" label="角色" width="180">
              </el-table-column>
              <el-table-column prop="address" label="状态" width="181">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.mg_state" active-color="#409EFF" inactive-color="#DCDFE6"
                    @change="ChangeState($event, scope.row.id)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" width="313">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="编辑用户信息" placement="top-start">
                    <el-button type="primary" size="mini" @click="getChange(scope.row.id)">编辑</el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除用户" placement="top-start">
                    <el-button type="danger" size="mini" @click="delUser(scope.row.id)">删除</el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="为用户分配角色" placement="top-start">
                    <el-button type="warning" size="mini"
                      @click="Assign(scope.row.id, scope.row.username, scope.row.role_name)">分配角色</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!-- 弹出框 编辑用户 -->
            <el-dialog title="修改用户信息" :visible.sync="dialogFormVisibles" width="430px">
              <el-form :model="getUser">
                <el-form-item label="账号" :label-width="formLabelWidth">
                  <el-input :disabled="true" prefix-icon="el-icon-user" v-model="getUser.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                  <el-input prefix-icon="el-icon-message" v-model="getUser.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                  <el-input prefix-icon="el-icon-mobile" v-model="getUser.mobile"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" @click="btnChange">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 弹出框 分配角色 -->
            <el-dialog title="收货地址" :visible.sync="dialogFormVisibless">
              <el-form>
                <el-form-item label="当前操作用户：" :label-width="formLabelWidth">
                  {{ usnm }}
                </el-form-item>
                <el-form-item label="当前操作用户角色：" :label-width="formLabelWidth">
                  {{ rolna }}
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select v-model="region" placeholder="请选择" @change="changeSel">
                    <el-option v-for="item in roleData" :key="item.id" :label="item.roleName" :value="item.roleName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibless = false">取 消</el-button>
                <el-button type="primary" @click='assignbtn'>确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </div>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="obj.pagenum" :page-sizes="[2, 10, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  // name: "welcome",
  // data() {
  //   return {
  //     machineNo: '',
  //     type: 'day',
  //     //  会员注册总数 
  //     SCEoption: {
  //       tooltip: {
  //         trigger: 'item',
  //         formatter: "{a} <br/>{b}月 : {c}"
  //       },
  //       legend: {
  //         data: [{
  //           name: 'App会员注册总数',
  //           icon: 'rect'
  //         }],
  //         top: 1,
  //         left: 1,
  //         itemGap: 10,
  //         itemWidth: 12,
  //         itemHeight: 12,
  //         textStyle: {
  //           fontSize: 12,
  //           color: "#11e31a"
  //         }
  //       },
  // }}}
  data() {
    return {
      tableData: [],
      value: true,
      searchval: '',
      dialogFormVisible: false,
      dialogFormVisibles: false,
      dialogFormVisibless: false,
      formLabelWidth: '140px',
      total: 0,
      region: '',
      obj: {
        query: '',
        pagenum: 1,
        pagesize: 10,
      },
      toAdd: {
        username: '',
        password: '',
        email: '',
        mobile: '',
      },
      getUser: {
        id: '',
        username: '',
        email: '',
        mobile: '',
      },
      usnm: '',
      rolna: '',
      id: '',
      rid: '',
      roleData: []
    }
  },
  async created() {
    let res = await this.$http.getUserList();
    console.log(res);
  },
  mounted() {
    this.getdata()
  },
  methods: {
    async getdata() {
      let res = await this.$http.getUserList(this.obj)
      this.tableData = res.data.data.users
      this.total = res.data.data.total
    },
    async getUserdata(id) {
      let res = await this.$http.getUser(id)
      this.getUser = res.data.data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.obj.pagesize = val
      this.getdata()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.obj.pagenum = val
      this.getdata()
    },
    btn() {
      this.obj.query = this.searchval
      this.getdata()
    },
    clear() {
      this.obj.query = ''
      this.getdata()
    },
    // 添加用户
    async btnAdd() {
      let rese = await this.$http.AddUser(this.toAdd)
      console.log(rese)
      this.toAdd = { username: '', password: '', email: '', mobile: '', }
      this.dialogFormVisible = false
      this.getdata()
    },
    // 修改用户状态
    async ChangeState($event, id) {
      let res = await this.$http.changeState(id, $event)
      // console.log(res)
    },
    // 获取用户信息
    async getChange(id) {
      this.dialogFormVisibles = true
      this.getUserdata(id)
    },
    // 编辑用户提交
    async btnChange() {
      let res = await this.$http.changeUser()
      console.log(res)
    },
    // 删除用户
    async delUser(id) {
      let confirmResult = await this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      let res = await this.$http.deleteUser(id)
      this.$message.success('删除商品分类成功！')
      this.getdata()
    },
    async Assign(id, username, rolname) {
      this.id = id
      console.log(this.id)
      this.dialogFormVisibless = true
      this.usnm = username
      this.rolna = rolname
      let res = await this.$http.getrole()
      this.roleData = res.data.data
    },
    changeSel(val) {
      this.roleData.forEach(item => {
        if (item.roleName == val) {
          this.rid = item.id
        }
      })
      console.log(this.rid)
    },
    async assignbtn() {
      // this.dialogFormVisibless=false
      console.log(this.id, this.rid)
      let res = await this.$http.assign(this.id, this.rid)
    }
  },
};
</script>
<style lang="scss" scoped>

</style>

